const vm = Vue.createApp({
    data() {
        return {
            // 定义一个归档数据接受的容器--List
            blogs: [],
            title: "hello"
        }
    },
    mounted() {
        // 执行查询归档数据
        this.loadBlogs()
    },

    methods: {
        // 异步查询归档接口数据---List方式
        loadBlogs() {
            axios.get('/archives/load').then(response => {
                console.log(response.data);
                this.blogs = response.data;
            })
        },
        // 加载更多
        async loadMore(index) {
            // 用对象架构
            let {year,articlesList,pageMap} =  this.blogs[index];
            let {pageNo,pages,pageSize} = pageMap;
            // 2: 分页叠加
            pageNo = pageNo * 1 + 1;
            // 3: 边界判断
            if (pageNo > pages) {
                alert("没有更多了!!!")
                return;
            }
            // 4：这里为什么要放回去，去渲染一些页面，
            this.blogs[index].pageMap.pageNo = pageNo;
            // 5:根据年份和分页去查询分页信息
            try {
                //let res = await axios.get("/archives/loadmore?year=" + year + "&pageNo=" + pageNo + "&pageSize=" + pageSize);
                let res = await axios.get("/archives/loadmore",{params:{year,pageNo,pageSize}});
                this.blogs[index].articlesList = articlesList.concat(res.data);
            }catch (e) {
                console.log("出错了.....")
            }
        }
    }
}).mount("#app");